<template>
  <div v-loading="loading">
    <div class="title">
      <div style="text-align: right; margin-right:15px">
        <p>更新时间：{{ latestTime }}</p>
      </div>
      
      <h2>我们如何为您提供帮助</h2>
      <p>选择一个类别来查看你需要的帮助</p>
    </div>
    <div class="main-header">
      <router-link tag="el-button" active-class="link-class" exact @click.native="changeID(item)" v-for="item in list" v-bind:key="item.id" to="">{{ item.name }}</router-link>
    </div>
    <div class="main-content">
      <div v-html="mainData" class="w-e-text"></div>
      <div id="deleteMD" v-if="isDelete" v-show="false"></div>
    </div>
    <!-- <div class="foot-content">
      <div>
        <el-link type="primary" @click.native="changeID2" :underline="false">用户协议</el-link>
        <el-link style="margin-left: 15px" @click.native="changeID3" type="primary" :underline="false">隐私政策</el-link>
      </div>
    </div> -->
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import { MarkDownDataModule } from '@/store/modules/markdown'
import E from 'wangeditor';
import moment from 'moment';
export default Vue.extend({
  computed: {
  },
  data() {
    return {
      loading: true,
      list: [],
      mainData:'',
      latestTime: '',
      isDelete: true,
      policy: '',
      protocol: ''
    };
  },
  mounted() {
    (this as any).ed = new E('#deleteMD');
    (this as any).ed.create();
    this.init()
  },
  methods: {
    init() {
      this.list = []
      this.latestTime = ""
      this.$pandaApi.apiGetListForUser().then((res: any) => {
        for(let i in res) {
          if(res[i].name == "Cloud Desktop Privacy Policy") {
            this.policy = res[i]
          } else if(res[i].name == "Cloud Desktop User Protocol") {
            this.protocol = res[i]
          } else {
            (this as any).list.push(res[i]);
          }
          if(this.latestTime < res[i].updated_at) {
            this.latestTime = res[i].updated_at
          }
          
        }
        if(this.list.length > 0) {
          this.mainData = (this as any).list[0].content
        }else {
          this.mainData = ""
        }
        
        this.latestTime = moment(this.latestTime).format('YYYY-MM-DD HH:mm:ss');
        this.isDelete = false;
        this.loading = false;
      })
    },
    changeID(item: any) {
      MarkDownDataModule.changecontentData(item);
      this.$router.push({
        path: '/faq/content'
      })
    },
    changeID2() {
      MarkDownDataModule.changecontentData(this.protocol);
      this.$router.push({
        path: '/faq/agreement'
      })
    },
    changeID3() {
      MarkDownDataModule.changecontentData(this.policy);
      this.$router.push({
        path: '/faq/agreement'
      })
    }
  }
})
</script>
<style lang="scss" scoped>
.title {
  text-align: center;
}
h2{
  margin-top: -5px !important;
  margin-bottom: -5px !important;
}
p {
  font-size: 14px;
  color: #bcbcbc;
}

.main-header {
    display: flex;
    flex-wrap: wrap;
    margin: 20px auto;
    justify-content: space-between;
    margin: 0 auto;
    // width: 90%;
}
.main-header:after {
  content: "";
  width: 21%;
  margin: 10px 10px
}
.link-class {
  width: 21%;
  min-width: 150px;
  height: 50px;
  background: #e0dfdf;
  color: black;
  border: transparent;
  font-size: 1rem;
  margin: 10px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.link-class:hover {
  background: #d1d1d1;
}
.main-content {
  margin: 20px;
}
.foot-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0px;

  position: fixed;// 使按钮固定于可视窗口的底部
  bottom: 0;
  left: 0;
  right: 0;
}
</style>

<style scoped>
/* table 样式 */
table {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
table td,
table th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 3px 5px;
}
table th {
  border-bottom: 2px solid #ccc;
  text-align: center;
}

/* blockquote 样式 */
blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #f1f1f1;
}

/* code 样式 */
code {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}
pre code {
  display: block;
}

/* ul ol 样式 */
ul, ol {
  margin: 10px 0 10px 20px;
}
</style>
